<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mustard UI Examples</title>

    <!-- Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">

    <!-- Normalize -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">

    <!-- Mustard UI -->
    <link rel="stylesheet" href="/dist/css/mustard-ui.min.css">
</head>
<body>

    <!-- Navigation -->
    <nav>
        <div class="nav-container">
            <div class="nav-logo">
                <a href="/">Examples</a>
            </div>
            <ul class="nav-links">
                <li><a href="/index.html">Home</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </div>
    </nav>

    <!-- Main Content -->
    <main>

        <section class="section-tertiary">
            <div class="container container-small">
                <h1 class="h3">Getting Started</h1>
                <p>If you want to start playing around with the styles provided, be sure to start with the <code>$brand-color</code> that can be found in the <code>base.scss</code> file.  It determines what the primary color for most components is.  Most of the colors used are also in a SCSS variable at the top of the component file.  You can find more examples of how this framework can be used below.</p>
                <p>Thanks for trying out Mustard UI!</p>
            </div>
        </section>


        <section class="section-secondary">
            <div class="container">

                <h2 class="h4">Examples:</h2>

                <div class="row">
                    <div class="col col-sm-6 col-lg-4">
                        <div class="card">
                            <h2 class="card-title">Blog Post</h2>
                            <p>This is an example of what a blog post would look like using various text styles, the flexbox grid, and the sidebar component.</p>
                            <div class="card-actions">
                                <a class="button button-primary-text" href="/examples/blog.html">View Blog Post</a>
                            </div>
                        </div>
                    </div>
                    <div class="col col-sm-6 col-lg-4">
                        <div class="card">
                            <h2 class="card-title">Shopping Cart</h2>
                            <p>This is an example of how you could use a simple table to create a shopping cart.  This example uses tables, button variations, and several typography styles.</p>
                            <div class="card-actions">
                                <a class="button button-primary-text" href="/examples/cart.html">View Shopping Cart</a>
                            </div>
                        </div>
                    </div>
                    <div class="col col-sm-6 col-lg-4">
                        <div class="card">
                            <h2 class="card-title">Pricing Table</h2>
                            <p>This example uses the pricing table component along with the flexbox grid.  If you shrink and grow the browser width, you'll see the packages adapt to different sizes.</p>
                            <div class="card-actions">
                                <a class="button button-primary-text" href="/examples/pricing.html">View Pricing</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </section>

    </main>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col col-lg-5">
                    <div class="footer-text">
                        <p class="h3">Footer Example</p>
                        <p>This is an example of the footer component.  You don't have to use this layout, but it's a good example of what you can do with what's provided.  If you wanted to included more columns for links and remove this text block, you can.</p>
                    </div>
                </div>
                <div class="col col-sm-6 col-lg-3 col-lg-offset-1">
                    <h4 class="footer-links-category">Links Category 1</h4>
                    <ul class="footer-links">
                        <li><a href="#">Link #1</a></li>
                        <li><a href="#">Link #2</a></li>
                        <li><a href="#">Link #3</a></li>
                    </ul>
                </div>

                <div class="col col-sm-6 col-lg-3">
                    <h4 class="footer-links-category">Links Category 2</h4>
                    <ul class="footer-links">
                        <li><a href="#">Link #1</a></li>
                        <li><a href="#">Link #2</a></li>
                        <li><a href="#">Link #3</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <p class="copyright align-center">Made with 🌭 by Kyle Logue. Licensed under the MIT License.</p>

    </footer>


    <!-- Javascript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function() {

    })
    </script>
</body>
</html>
